/*
  思路：
      1.创建 file 按钮，将需要的图片上传；
      2.创建 canvas 标签，将上传的图片绘制进画布；
      3.可以移动裁剪框 cutBox；
      4.拖动裁剪框选择图像区域，松开鼠标可以在 imageShow 中预览裁剪后的图片；
      5.点击保存按钮，上传图片到服务器；
      6.服务器保存裁剪后的小图。
*/

const bigCtx = $('#myCanvas')[0].getContext('2d');
const smallCtx = $('#smallCanvas')[0].getContext('2d');

// 选择图片
$('#uploadImg').on('change', function () {
  const avator = $(this)[0].files[0]; // 上传图片对象

  // 临时预览图片
  const reader = new FileReader();
  reader.readAsDataURL(avator); // 读取文件信息，将文件信息转为 base64 编码
  reader.onload = function () {
    // 文件读取成功后，读取后的信息保存在 reader.result 中，base64 数据可以直接在网页中展示
    $('.upload').after('<img id="chacheImg" src="' + reader.result + '" />');
    console.log('读取的图像数据：', reader.result)

    // 图片加载成功后，写入 canvas
    $('#chacheImg')[0].onload = function () {
      let imgWidth = $(this).width(); // 获取上传图片的宽度
      let imgHeight = $(this).height();

      // 将上传图片的大小等比例缩放到 canvas 中
      // 计算比例
      let adapterHeight = 400 * imgHeight / imgWidth;

      bigCtx.drawImage(this, 0, 0, 400, adapterHeight);

      // 画完后，临时预览的图片需要移除掉
      $(this).remove();
    }
  }
});

// 移动裁剪框
$('#cutBox').on('mousedown', function (e) {
  // 获取裁剪框初始时坐标
  let cutLeft = $(this).position().left;
  let cutTop = $(this).position().top;

  $(this).on('mousemove', function (ev) {
    // 修改裁剪框位置
    $(this).css({
      left: cutLeft + (ev.clientX - e.clientX) + 'px',
      top: cutTop + (ev.clientY - e.clientY) + 'px'
    });

    // 阈值判断
    if (parseInt($(this).css('left')) <= 0) {
      $(this).css('left', '0px');
    }

    if (parseInt($(this).css('left')) >= 200) {
      $(this).css('left', '200px');
    }
  })
});
$(document).on('mouseup', function () {
  $('#cutBox').off('mousemove');
});

// 松开鼠标后预览裁剪的图片
$('#cutBox').on('mouseup', function () {
  // 获取裁剪框的坐标
  let cutLeft = $(this).position().left;
  let cutTop = $(this).position().top;

  // 截图
  let cutData = bigCtx.getImageData(cutLeft, cutTop, 200, 200);

  smallCtx.putImageData(cutData, 0, 0);
});

// 上传
$('#uploadBtn').on('click', function () {
  // 将 小 canvas 中的图像转为 base64 编码再上传
  let uploadData = $('#smallCanvas')[0].toDataURL();

  $.ajax({
    url: '/upload/cut',
    method: 'POST',
    data: {
      userId: '123',
      uploadData
    }
  })
    .done(function (res) {
      console.log('成功', res);
    })
    .fail(function (err) {
      console.log('失败', err);
    });
});